<script setup>
import router from '@/router';
import { usePayStore } from '@/stores';
import { ElMessage } from 'element-plus';
import AddressPage from '@/components/AddrssPage.vue'
import { currentTime } from '@/utils/dayjs';
import { GetPayOrderAPI } from '@/apis/book';

// 图书数量
const bookNumber = ref(1)

const payFn = async () => {
  if(formData.value.name === '') {
    ElMessage.warning('请添加地址')
    return
  }
  
  const submitData = {
    create_time: currentTime(),
    order_money: totalMoney.value,
    book_id: orderDetail.value.id,
    name: usePayStore().createOrder.name,
    phone: usePayStore().createOrder.phone,
    address_id:  usePayStore().createOrder.addressId,
    buyNumber: bookNumber.value
  }
  console.log(submitData);
  
  try {
    const orderId = await GetPayOrderAPI(submitData)
    await usePayStore().setOrderId(orderId)
    ElMessage.success('下单成功')
    usePayStore().removeOrderDetail()
    usePayStore().removeOrder()
    usePayStore().bookId = ''
    router.push('/payOrder')
  } catch (error) {
    ElMessage.error('下单失败')
  } 
  
  
}
const confirmFn = () => {
  isShow.value = false
  ElMessage.success('取消成功')
  router.push('/')
}

const isShow = ref(false)
const cancelFn = () => {
  isShow.value = true
}


const orderDetail = ref()
const getOrderDetail = () => {
  orderDetail.value = usePayStore().orderDetail
  console.log(orderDetail.value);
  
}

const formData = ref({
  create_time: '',
  order_money: '',
  name: '',
  provinces: '',
  city: '',
  district: '',
  detail_address: ''
})
const totalMoney = computed(() => {
  return orderDetail.value.bookMoney * bookNumber.value
})

// 地址弹出层
const isShouAddress = ref(false)
const addAddress = () => {
  isShouAddress.value = false
  formData.value = usePayStore().createOrder
  console.log(formData.value);
  
}


onBeforeMount(() => {
  getOrderDetail()
})
</script>

<template>
  <el-card>
    <el-descriptions
      title="订单详情信息"
      direction="vertical"
      :column="6"
      border
    >
    <template #extra>
        <div class="cancel" @click="cancelFn">
          取消
        </div>
      </template>
    <el-descriptions-item
      :width="140"
      label="图片"
      align="center"
    >
      <el-image
        style="width: 100px; height: 100px"
        :src="orderDetail?.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
      />
    </el-descriptions-item>
    <el-descriptions-item  label-align="center" align="center" label="书名" class-name="text">{{ orderDetail?.bookName ||  "西游记"}}</el-descriptions-item>
    <el-descriptions-item  label-align="center" align="center"  label="作者">
      {{ orderDetail?.author ||  "吴承恩"}}
    </el-descriptions-item>
    <el-descriptions-item  label-align="center" align="center" label="价格" > {{ orderDetail?.bookMoney ||  "20"}} </el-descriptions-item>

    <el-descriptions-item  label-align="center" align="center" label="数量">
      <el-input-number v-model="bookNumber" :min="1" :max="10" @change="handleChange" />
    </el-descriptions-item>
    <el-descriptions-item span="2"  label-align="center" align="center" label="订单金额">
      {{ totalMoney }} 元
    </el-descriptions-item>
    <el-descriptions-item v-if="formData.name === ''" span="6" label="请选择地址" align="center">
      <template #label >
        <div class="addressTitle">
          <div>地址信息</div>
          <div @click="isShouAddress = true">+</div>
        </div>
      </template>
      <template #default>
        <div @click="isShouAddress = true">
          点击添加地址信息
        </div>
      </template>
    </el-descriptions-item>
  </el-descriptions>
  <div v-if="formData.name != ''">
  <div class="item">
    <div class="title">收货姓名</div>
    <div class="name">
      <div>
        {{ formData.name }}
      </div>
      <div @click="isShouAddress = true" class="openAddress">
        修改地址
      </div>
      
    </div>

  </div>
  <div class="item">
    <div class="title">联系方式</div>
    <div class="name">{{ formData.phone }}</div>
  </div>
  <div class="item">
    <div class="title">收货地址</div>
    <div class="name"> {{ formData.provinces  }} {{ formData.city }} {{ formData.district }} {{ formData.detail_address }}</div>
  </div>
</div>
  <div class="item pay" @click="payFn">立即下单</div>
  </el-card>

  <!-- 取消弹出层 -->
  <el-dialog :align-center="true" v-model="isShow" :show-close="true" width="500" center>
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">确认取消吗?</h4>
      </div>
    </template>
    <template #footer>
      <el-button type="danger" style="width: 150px;" @click="confirmFn">确认</el-button>
    </template>
  </el-dialog>

  <!-- 地址弹出层 -->
  <el-dialog
    v-model="isShouAddress"
    title="请选择收货地址"
    width="700"
    :before-close="handleClose"
    :close-on-click-modal="false"
    center
  >
    <template #footer>
      <AddressPage  @changeStatus="addAddress" />
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.number {
  width: 50px;

  margin: 0 5px;
}

.text {
  line-height: 100px;
}

.el-input {
  text-align: center;
}

.pay {
  width: 100%;
  justify-content: center;
  cursor: pointer !important;
  color: #41b883;
}
.pay:hover {
  border-color: skyblue;
  color: skyblue;
}
.addressTitle {
  display: flex;
  justify-content: space-between;

  padding-left: 20px;
}
.addressTitle div:last-child {
  cursor: pointer;
}

.cancel {
  cursor: pointer;
}

.item {
  display: flex;
  height: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px solid #dcdfe6;
  margin-top: -1px;
}
.item .title {
  width: 100px;
  border-right: 1px solid #dcdfe6;
}
.item .name {
  width: 100%;
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
}
.openAddress {
  font-weight: 700;
  cursor: pointer;
}
</style>